import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, Popup, Button } from 'antd-mobile'
import { ProductCard, Tag, } from 'react-vant';
import api from '../../api/axios'
import styles from './order.module.css'
function Order() {
  const { state } = useLocation()
  const Navigate = useNavigate()
  const [visible1, setVisible1] = useState(false)
  console.log(state)
  const orderprice=async()=>{
    const res = await api.get('/api//pay',{
      params:{
        title:'小白',
        id:'230000200003050046',
        price:"1000"
      }
    })
    location.href=res.data.data
  }
  return (
    <div>
      <NavBar onBack={() => Navigate(-1)}>我要预定</NavBar>
      <ProductCard
        footer={state.date}
        desc="Merusyed SDK"
        title={state.title}
        thumb={state.image}
        currency={false}
        decimal={false}
        price='182参与者'
      />
      <div className={styles.price_css}>￥{state.price}</div>
      <Button style={{
        width: '350px', height: '50px', marginLeft: '13px',
        color: '#fff', background: 'rgba(111, 13, 141, 0.87)', borderRadius: '40px'
      }} onClick={() => setVisible1(true)}>确定</Button>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <div style={{padding:'10px',marginTop:'10px'}}>
          <Button onClick={()=>orderprice()} block color='primary' size='large'>
            支付宝
          </Button>
          <Button style={{marginTop:'18px'}} block color='success' size='large'>
            微信
          </Button>
          <Button  style={{marginTop:'18px'}} block color='warning' size='large'>
            云支付
          </Button>
        </div>

      </Popup>
    </div>
  )
}

export default Order
